<template>
<Affix>
  <div class="app-header">
    <div class="hd clearfix">
      <div class="logo fl">
        <router-link to="/">
        <img src="../assets/images/index/logo.png" width="180" alt="">
        </router-link>
      </div>
      <ul class="menus fl clearfix">
        <li v-for="(m,i) in menus" :key="i">
          <router-link :to="m.link">{{m.title}}</router-link>
        </li>
      </ul>

      <ul class="login clearfix fr">
        <li class="active">
          <router-link to="/register" >立即注册</router-link>
        </li>
        <li>
          <router-link to="/login" >登录</router-link>
        </li>
      </ul>
    </div>
    
  </div>
  </Affix>
</template>

<script>
export default {
  data () {
    return {
      menus: [
        {title: '首页', link: '/index'},
        {title: '产品与服务', link: '/products'},
        {title: '解决方案', link: '/solutions'},
        {title: '技术支持', link: '/supports'},
        {title: '应用市场', link: '/markets'},
        {title: '资讯中心', link: '/news'},
        {title: '关于云创', link: '/about'}
      ]
    }
  }
}
</script>

<style lang="less" scoped>
@color-primary: #147de5;

.app-header{
  background: @color-primary;
  color: #fff;
  height: 80px;
}
.logo {
  margin-top:20px;
}
.menus{
  margin-left: 60px;
  li {
    float: left;
    a{
      display: block;
      line-height: 77px;
      font-size: 16px;
      padding: 0 20px;
      color: #fff;
      border-bottom: 3px solid @color-primary;
  
      &.router-link-active{
        border-bottom-color: #fff;
      }
    }
  }
}

.login{
    width: 200px;
  li {
    float: right;
    a{
      display: block;
      line-height: 80px;
      font-size: 16px;
      padding: 0 16px;
      color: #fff;      
    }
    &.active a{
      background: #fff;
      color: #f60;;
    }
  }
}
</style>
